<template>
	<!-- 职位列表详情信息 -->
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<!-- 详情页面 -->
		<view class="main">
			<view class="header" >
				<view class="container" >
					<view class="title">{{infoData.title}}</view>
					<view class="money-yuan">
						<view class="money" :style="{color:app_color}">{{zh(infoData.min_money)}}-{{zh(infoData.max_money)}}</view>
					</view>
					<view class="types">
						<view class="type">经验：{{infoData.exp_name}}</view>
						<view class="type">学历：{{infoData.edu_name}}</view>
						<view class="type">招聘：{{infoData.num}}人</view>
			<!-- 			<view class="type" v-for="(item, index) in data.types" :key="index">{{item}}</view> -->
					</view>
					<view class="notice">
						<view class="icon-types">
							<view class="icon">
								<u-icon name="bell" color="#fff" size="12"></u-icon>
							</view>
							<view class="notice-types">
								
								<view class="type" v-for="(item, index) in infoData.tag" :key="index">{{item}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="margin:10px;" v-if="userinfo.id == infoData.uid">
				<u-button type="primary" text="职位申请记录" @click="sqjl()"></u-button>
			</view>
			<view class="middle" v-if="infoData.id">
				<view class="container">
					<view class="details" style="border-radius: 4px;">
						<view class="title">职位详情</view>
						<view style="white-space: pre-wrap;">
							{{infoData.content}}
						</view>
					<!-- 	<view class="requestBtn">马上申请</view> -->
					</view>
					<view class="information" style="border-radius: 4px;" v-if="infoData.qiye">
						<view class="title">公司信息</view>
						<view class="left-right" @click="navto('pages/plugin/zx/industry?id='+infoData.qid)">
							<view class="left">
								<img :src="infoData.qiye.logo" alt="" style="border-radius: 100px;">
							</view>
							<view class="right">
								<view class="name">{{infoData.qiye.name}}</view>
								<u-icon name="arrow-right" size="18"></u-icon>
							</view>
						</view>
						<!-- #ifdef MP-WEIXIN --> 
						<view class="map">
							<view class="page-body">
								<view class="page-section page-section-gap" style="border: none;">
									<map style="width: 100%; height: 400rpx;border: none;" :latitude="infoData.la" 
										:longitude="infoData.ln" >
									</map>
								</view>
							</view>
						</view>
						<!-- #endif -->
						<view class="adderss" @click="toaddress(infoData.address)">
							<u-icon name="map-fill" size="14"></u-icon>
							<text>{{infoData.address}}</text>
						</view>
					</view>
				</view>
				<image :src="ad.zpc_img" v-if="ad.zpc_img&&ad.zpc_img.length" mode="widthFix" 
				style="width: 100%;margin-top: 10px;" @click="navto(ad.zpc_url)"></image>
			</view>

			<view style="width: 100%;height: 70px"></view>
			<view class="footer">
				<view class="container" v-if="userinfo&&userinfo.id&&userinfo.id==infoData.uid">
					<view class="left">
						<view class="share" style="position: relative;" v-if="infoData.status==1" @click="sw(infoData.id,0)">
							<u-icon name="star-fill" color="#00aa7f" size="30"></u-icon>
							<text style="color:#00aa7f ;">已开放</text>
						</view>
						<view class="share" style="position: relative;"  @click="sw(infoData.id,1)" v-else>
							<u-icon name="star" color="#ffaa00" size="30"></u-icon>
							<text style="color:#ffaa00 ;">已关闭</text>
						</view>
						<view class="chat" @click="del(infoData.id)">
							<u-icon name="trash-fill" color="red" size="30"></u-icon>
							<text style="color: red;">删除</text>
						</view>
					</view>
					<view class="right" @click="edit(infoData.id)" :style="{background:app_color}">编辑岗位</view>
				</view>
				
				<view class="container" v-else>
					<view class="left">
						<view class="share" style="position: relative;">
							<u-icon name="share" size="30"></u-icon>
							<text>分享</text>
							<button open-type="share"
							style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;
							opacity: 0;"></button>
						</view>
						<view class="chat" @click="tel(infoData.tel)">
							<u-icon name="phone-fill" size="30"></u-icon>
							<text>联系</text>
						</view>
					</view>
					<view class="right"  :style="{background:app_color}" @click="startSq()">
						<text v-if="infoData.shenqing==null">申请职位</text>
						<text v-else>已申请</text>
					</view>
				</view>
				
			</view>
		</view>
		<u-popup :show="sq" @close="sq = false" >
			<view style="margin: 10px;;">
				<u--form
								labelPosition="left"
								borderBottom
								:model="shenqing"
								ref="uForm"
						>
							<u-form-item
									label="姓名:"
								
									borderBottom
									ref="item1"
							>
								<u--input
										v-model="shenqing.name"
										 placeholder="请输入姓名"
										border="none"
								></u--input>
							</u-form-item>
							<u-form-item
									label="电话:"
									borderBottom
									ref="item1"
							>
								<u--input
										v-model="shenqing.tel"
										 placeholder="请输入手机号码"
										border="none"
										type="number"
								></u--input>
							</u-form-item>
							<u-form-item
									label="申请说明:"
									borderBottom
									ref="item1"
							>
							<u--textarea v-model="shenqing.content" placeholder="请输入内容" ></u--textarea>
							</u-form-item>
					</u--form>
					<view style="margin-top: 10px;">
						<u-button text="申请该职位" :color="app_color" @click="s"></u-button>
					</view>
			</view>
		</u-popup>
			<u-popup :show="jlbox" @close="jlbox = false">
				<view style="margin-top: 10px;">
				<scroll-view style="height: 60vh;overflow-y: auto;display: flex;flex-direction: column;" scroll-y >
					 <u-collapse
						:accordion="true"
					  >
					    <u-collapse-item
						v-for="list in jilu"
					        :title="list.name"
					      >
						    <view class="u-collapse-content" @click="tel(list.tel)" style="margin-bottom: 10px;">联系电话：{{list.tel}}</view>
					        <view class="u-collapse-content">申请说明：{{list.content}}</view>
					      </u-collapse-item>
					
					</u-collapse>
				</scroll-view>
				</view>
			</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time:0,
				jlbox:false,
				sq:false,
				shenqing:{
					name:"",
					tel:"",
					content:""
				},
				show:false,
				data: {

				},
				info: {
					id: "",
					page: 1,
					page_num: 6,
					la: "",
					lg: "",
					search: "",
					province: "",
					city: "",
					c_time: "",
					type: "",
					tag: "",
				},
				infoData: {},

				delId:0,
				id: 0,
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					width: '14', // 标记点图标宽度
					height: '20', // 标记点图标高度
					// #ifdef H5
					iconPath: 'https://moxifile.oss-cn-beijing.aliyuncs.com/images/icon/address_1.png',
					width: '18', // 标记点图标宽度
					height: '20', // 标记点图标高度
					// #endif
				}],

				content: '',
				jilu:[],
				ad:{}

			}
		},

		onLoad() {
			this.info.id = this.param.id
			this.get()
		},
		methods: {
			sqjl(){
				this.moxiPost('/plugin/zx/user/zhaoping/jl',{zid:this.infoData.id},(data)=>{
					
					this.jilu = data.data;
					 this.jlbox = true;
				})
				 
			},
			toaddress(address){
				if(this.infoData.ln&&this.infoData.la){
					uni.openLocation({
								latitude: Number(this.infoData.la),
								longitude: Number(this.infoData.ln),
								name:address,
								success: function () {
									
								}
							});
				}
			},
			startSq(){
				if(this.infoData.shenqing == null){
					
				}else{
			
					this.shenqing = this.infoData.shenqing
				}
				this.sq = true;
			},
			s(){
				this.shenqing.zid = this.infoData.id
				this.sq = false;
				let self = this;
				uni.showModal({
					title: '确认要申请该职位吗？',
					content: '请确认填写资料正确，以便招聘方及时与您联系！',
					success: function (res) {
						if (res.confirm) {
							self.moxiPost('/plugin/zx/user/zhaoping/sq',self.shenqing,(data)=>{
								self.msg(data.hint)
								self.$set(self.infoData,'shenqing',data.data);
							})
						} else if (res.cancel) {
							self.sq = true;
						}
					}
				});
			},
			
			del(id){
				let self = this;
				uni.showModal({
					title: '确认要删除该职位吗？',
					content: '删除后无法恢复，请谨慎操作！',
					success: function (res) {
						if (res.confirm) {
							self.moxiPost('/plugin/zx/user/zhaoping/del',{id:id},(data)=>{
								self.msg(data.hint)
								setTimeout(()=>{
									uni.redirectTo({
										url: '/pages/plugin/zx/myjob'
									});
								},500)
							})
						} else if (res.cancel) {
							
						}
					}
				});
			},
			sw(id,status){
				if(status!=1){
					status = 0;
				}
				this.moxiPost('/plugin/zx/user/zhaoping/status',{status:status,id:id},(data)=>{
					this.infoData.status = status;
				})
			},
			edit(id){
				uni.redirectTo({
					url: '/pages/plugin/zx/addJob?id='+id
				});
			},
			tel(tel){
				uni.makePhoneCall({
					phoneNumber:tel
				});
			},
			zh(num) {
				num = Number(num);
				if (num >= 1000) {
					return (num / 1000).toFixed(1) + 'K'
				} else {
					return num.toString()
				}
			},
			get() {
				let self = this
				this.moxiPost('/plugin/zx/user/zhaoping/get_info', this.info, function(data) {
					console.log(data);
					if(data.ad){
						
						self.ad = data.ad;
						
						self.$forceUpdate()
					}
					self.infoData = data.data
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		background-color: #f2f2f2;
		overflow: auto;
	}

	.header {
		// margin-top: 20rpx;
		padding: 10px;
		margin-bottom: 10px;

		.container {
			padding: 10px;
			background-color: #fff;
		
		}


		.title {
			margin-bottom: 10rpx;
			font-size: 18px;
			font-weight: bold;
			color: #232323;
		}

		.money-yuan {
			display: flex;
			align-items: baseline;
			font-size: 16px;
			color: #fc7f63;

			.yuan {
				margin-left: 10rpx;
				font-size: 12px;
			}
		}

		.types {
			display: flex;
			// margin-top: 2rpx;
			font-size: 12px;
			// font-weight: bold;
			letter-spacing: 2rpx;
			color: #232323;

			.type {
				position: relative;
				margin-right: 18rpx;
				color: #666;

				&::after {
					content: '.';
					position: absolute;
					left: -9rpx;
					bottom: -25%;
					transform: translate(-50%, -50%);
				}

				&:nth-of-type(1)::after {
					content: '';
				}
			}
		}

		.notice {
			display: inline-block;

			.icon-types {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				padding: 4rpx 12rpx;
				border: 2rpx solid #618ff1;
				border-radius: 32rpx;

				.icon {
					width: 30rpx;
					height: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10rpx;
					border-radius: 50%;
					background-color: #618ff1;
				}

				.notice-types {
					display: flex;
					position: relative;
					font-size: 12px;
					font-weight: bold;
					letter-spacing: 2rpx;
					color: #618ff1;


					.type {
						position: relative;
						margin-right: 10rpx;
						font-size: 12px;

						&::after {
							content: '.';
							position: absolute;
							left: -5rpx;
							bottom: -25%;
							transform: translate(-50%, -50%);
						}

						&:nth-last-child(1) {
							margin: 0;
						}

						&:nth-of-type(1)::after {
							content: '';
						}
					}

				}
			}
		}
	}

	.middle {

		.details {
			padding: 10px;
			background-color: #fff;

			&>.title {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
		}

		.requestBtn {
			width: 100%;
			height: 80rpx;
			margin-top: 40rpx;
			border-radius: 18rpx;
			font-size: 17px;
			font-weight: bold;
			text-align: center;
			line-height: 80rpx;
			background-color: #fb6c5b;
			color: #fff;
		}

		.information {
			margin-top: 20px;
			padding: 10px;
			background-color: #fff;

			.title {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.left-right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.left {
					width: 60px;
					height: 60px;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.right {
					width: calc(100% - 60px - 10px);
					display: flex;
					justify-content: space-between;
					margin-left: 10px;

					.name {
						font-size: 14px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.other {
						font-size: 12px;
						color: #666;
					}
				}

			}

			.types {
				display: flex;
				align-items: center;

				.type {
					margin-right: 10rpx;
					padding: 0 18rpx;
					border: 1px solid black;
					border-radius: 50rpx;
					font-size: 12px;
					font-weight: 400;
				}
			}

			.map {
				width: 100%;
				// height: 350rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				border: 1px solid #eee;
				border-radius: 24rpx;
				overflow: hidden;
				box-shadow: 0 0 4px #eee;
			}

			.adderss {
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-radius: 50rpx;
				background-color: #f3f2f6;

				text {
					margin-left: 16rpx;
					font-size: 12px
				}
			}
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		// position: sticky;
		bottom: 0;
		margin-top: 20rpx;
		background-color: #fff;

		.container {
			display: flex;
			padding: 10rpx 0;
			box-sizing: border-box;
		}

		.left {
			width: 30%;
			display: flex;

			.share,
			.chat {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 12px;
					color: #606266;
				}
			}
		}

		.right {
			width: 70%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 18rpx;
			font-size: 17px;
			// font-weight: bold;
			background-color: #fb6c5b;
			color: #fff;
		}
	}

	.container {
		width: 94%;
		margin: 0 auto;
		border-radius: 4px;
	}
</style>